<template>
    <!-- 主容器：控制悬浮按钮在页面中的位置 -->
    <div class="fab-menu-wrapper" :style="containerStyle">
        <!-- 主按钮 -->
        <t-button shape="circle" :size="buttonSize" theme="primary" @click="toggleMenu" class="fab-main">
            <t-icon :name="showMenu ? 'close' : 'add'" />
        </t-button>

        <!-- 菜单项容器 -->
        <div v-if="showMenu" class="fab-menu-items" :class="`layout-${layout}`">
            <t-button v-for="(item, index) in menuItems" :key="item.key" variant="outline" shape="circle"
                :size="buttonSize" :style="{ transitionDelay: `${index * 50}ms` }" @click="handleClick(item)">
                <t-icon :name="item.icon" />
            </t-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

interface MenuItem {
    key: string;
    icon: string;
    onClick: () => void;
}

const props = withDefaults(
    defineProps < {
        menuItems: MenuItem[];
        /**
         * 布局方向
         */
        layout?: 'top' | 'bottom' | 'left' | 'right';
        /**
         * 主按钮在页面中的位置
         */
        position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
        /**
         * 按钮大小（主按钮和菜单按钮一致）
         * 支持 small / medium / large
         * @default 'large'
         */
        buttonSize?: 'small' | 'medium' | 'large';
    } > (),
    {
        layout: 'top',
        position: 'bottom-right',
        buttonSize: 'large',
    }
);

const showMenu = ref(false);

// 主按钮容器定位
const containerStyle = computed(() => {
    const style: Record<string, string> = { position: 'fixed', zIndex: '1000' };
    const spacing = '30px';

    switch (props.position) {
        case 'top-left':
            style.top = spacing;
            style.left = spacing;
            break;
        case 'top-right':
            style.top = spacing;
            style.right = spacing;
            break;
        case 'bottom-left':
            style.bottom = spacing;
            style.left = spacing;
            break;
        case 'bottom-right':
        default:
            style.bottom = spacing;
            style.right = spacing;
            break;
    }
    return style;
});

const toggleMenu = () => {
    showMenu.value = !showMenu.value;
};

const handleClick = (item: MenuItem) => {
    item.onClick();
    showMenu.value = false;
};
</script>
<style scoped>
.fab-menu-wrapper {
    position: relative;
    display: inline-block;
}

.fab-main {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.fab-main:hover {
    transform: scale(1.05);
}

.fab-menu-items {
    position: absolute;
    pointer-events: none;
    opacity: 1;
    display: flex;
    gap: 8px;
}

/* 布局：正上方 */
.layout-top {
    flex-direction: column;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    align-items: center;
}

/* 布局：正下方 */
.layout-bottom {
    flex-direction: column;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    align-items: center;
}

/* 布局：左侧 */
.layout-left {
    flex-direction: row;
    right: 100%;
    /* 放在主按钮左侧 */
    top: 50%;
    /* 垂直居中 */
    transform: translateY(-50%);
    /* 调整中心 */
    margin-right: 8px;
    /* 与主按钮间距 */
    justify-content: flex-end;
    /* 菜单项靠右排列 */
    gap: 8px;
}

/* 布局：右侧 */
.layout-right {
    flex-direction: row;
    left: 100%;
    /* 放在主按钮右侧 */
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    justify-content: flex-start;
    /* 菜单项靠左排列 */
    gap: 8px;
}

/* 布局：圆形（可选） */
.layout-circle {
    flex-direction: column;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    gap: 4px;
}

.layout-circle>*:nth-child(1) {
    transform: translateX(-30px);
}

.layout-circle>*:nth-child(2) {
    transform: translateY(-20px);
}

.layout-circle>*:nth-child(3) {
    transform: translateX(30px);
}

/* 恢复点击事件 */
.fab-menu-items>* {
    pointer-events: auto;
}
</style>